<template>
  <div>
    <div class="nine-one-goods">
      <div
        v-for="item in nineHeaderList"
        :key="item.id"
        class="nine-goods-lists"
      >
        <img :src="item.pic" alt="" height="100" width="100" />
        <p class="nine-dtitle">{{ item.dtitle }}</p>
        <p>
          <span class="nine-price">￥{{ item.jiage }}</span>
          <s
            ><span class="nine-quanjia" style="color: #333">{{
              item.yuanjia
            }}</span></s
          >
        </p>
        <p style="color: white" class="nine-qiang">
          疯抢{{ item.xiaoliang }}件
        </p>
      </div>
    </div>
    <div class="nine-foryou"></div>

    <div class="nine-header">
      <van-grid :border="false" :column-num="2">
        <van-grid-item
          v-for="item in nineList"
          :key="item.id"
          :gutter="10"
          :to="{
            name: 'nineMail',
            params: {
              cid: item.id,
              goodid: item.goodsid,
            },
          }"
        >
          <img :src="item.pic" class="nine-product-img" />
          <div class="nine-title">
            <p class="nine-title1">{{ item.title }}</p>
            <p class="nine-youhui">
              劵后 <span class="nine-jiage">￥{{ item.jiage }}</span>
            </p>
            <p class="nine-discount1">
              {{ item.special }}
              <span class="nine-discount">券{{ item.quanJine }}元</span>
            </p>
            <p class="nine-yishou">已售{{ item.xiaoliang }}</p>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>
<script>
import { computed, defineComponent, onMounted } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const store = useStore();
    const nineList = computed(() => store.state.ninelist.list);
    const nineHeaderList = computed(() => store.state.ninelist.list_header);
    onMounted(() => {
      store.dispatch({
        type: "ninelist/getNineList",
        params: {
          cid: "2",
          pageNo: "1",
          pageSize: "10",
        },
      });
      store.dispatch({
        type: "ninelist/getHeaderList",
      });
    });
    return {
      nineList,
      nineHeaderList,
    };
  },
});
</script>
<style scoped>
.nine-foryou {
  height: 0.7rem;
  background: url(https://cmsstatic.ffquan.cn/dist/static/foryou.012aad09.png)
    no-repeat 50%;
}
.nine-youhui {
  font-size: 0.12rem;
}
.nine-title1 {
  font-size: 0.12rem;
  width: 1.6rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 0.1rem;
  overflow: hidden;
}
.nine-jiage {
  color: rgb(255, 128, 48);
  font-size: 0.2rem;
}
.nine-title {
  font-size: 0.12rem;
  width: 1.6rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 0.1rem;
}
.nine-product-img {
  width: 100%;
}

.nine-discount {
  padding: 0 0.08rem;
  border: 1px red solid;
  background: red;
  color: white;
}
.nine-header {
  background: rgb(255, 128, 48);
  padding-bottom: 0.1rem;
}
/deep/.van-tabs__nav--card {
  background: rgb(255, 128, 48);
  border: none;
}
/deep/.van-tabs--card > .van-tabs__wrap {
  height: 40px;
}
.nine-goods-lists {
  width: 2.2rem;
  margin: 0.1rem;
  background: white;
  border-radius: 10px;
  padding: 0.1rem;
  position: relative;
}
.nine-goods-lists[data-v-d6b4adb2] {
  font-size: 0.1rem;
  white-space: nowrap;
  width: 1rem;
  position: relative;
}
.nine-one-goods {
  display: flex;
  overflow-x: auto;
  background: #f5f5f5;
  font-size: 0.1rem;
}
.nine-dtitle {
  overflow: hidden;
  color: #333;
}
.nine-price {
  font-size: 0.16rem;
  color: #fe3738;
}
.nine-quanjia {
  margin-left: 0.1rem;
  text-decoration: red;
}
.nine-qiang {
  background: #fe3738;
  text-align: center;
  border-radius: 10px;
  position: absolute;
  top: 0.95rem;
  left: 0.1rem;
  width: 1rem;
}
</style>
